<template>
    <!-- 筛选工具栏 -->
    <view class="select-bar">
        <view class="sort u-flex u-row-around">
            <view class="u-flex" @click="sortFn(0)">
                综合
                <o-sort :status="sortList[0]" :active="selectItem == 0"></o-sort>
            </view>
            <view class="u-flex" @click="sortFn(1)">
                销量
                <o-sort :status="sortList[1]" :active="selectItem == 1"></o-sort>
            </view>
            <view class="u-flex" @click="sortFn(2)">
                价格
                <o-sort :status="sortList[2]" :active="selectItem == 2"></o-sort>
            </view>
            <view class="u-flex" @click="sortFn(3)">
                上新
                <o-sort :status="sortList[3]" :active="selectItem == 3"></o-sort>
            </view>
            <view class="icon icon-filter" @click="openDrawer"></view>
        </view>
        <o-filter ref="filterPop" @on-submit="submit"></o-filter>
    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import oSort from './sort.vue'
import oFilter from './filter.vue'

const selectItem = ref(-1)
const sortList = ref([0, 0, 0, 0])

const emit = defineEmits(['sort', 'on-filter'])

const filterPop = ref<any>(null)

/**排序 */
function sortFn(n: number) {
    selectItem.value = n
    // 当我以上新排序的时候  需要对 综合 以及价格 置零
    // m  0:综合  1 销量 2 价格 3  上新
    sortList.value.forEach((m, i) => {
        if (i != n) {
            sortList.value[i] = 0
        }
    })
    sortList.value[n] += 1
    if (sortList.value[n] >= 3) {
        sortList.value[n] = 1
    }

    emit('sort', sortList.value)
}

function openDrawer() {
    filterPop.value?.toggle()
}

function submit(value: any) {
    sortList.value = [0, 0, 0, 0]
    emit('on-filter', value)
}
</script>

<style scoped lang="scss">
.select-bar {
        background-color: $uni-bg-color;
        position: fixed;
        top: calc(var(--status-bar-height) + 66px);
        left: 0;
        width: 100%;
        z-index: 99;
        height: 44px;
        padding-top: 11rpx;
        border-bottom: 1rpx solid $uni-bg-color-grey;
        .sort {
            font-size: 28rpx;
            line-height: 60rpx;
        }
    }
</style>
